<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>bootstrap</title>
		<link href="css/bootstrap.css" rel="stylesheet">
		<script src="js/jquery.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<style>
			hr{
				border:1px solid #666;
			}
			body{
				margin:50px;
			}
		</style>
	</head>
	<body>
		<!-- 输入框组 -->
		<!-- 在左侧添加文字 -->
		<div class="input-group">
			<span class="input-group-addon">@</span>
			<input type="text" class="form-control">
		</div>
		<!-- 在右侧添加加文字 -->
		<div class="input-group">
			<input type="text" class="form-control">
			<span class="input-group-addon">$</span>
		</div>
		<!-- 在两侧添加亭子 -->
		<div class="input-group">
			<span class="input-group-addon">$</span>
			<input type="text" class="form-control">
			<span class="input-group-addon">.00</span>
		</div>
		<!-- 左侧使用单选按钮或复选框 -->
		<div class="input-group">
			<span class="input-group-addon">
				<input type="radio" name="" id="">
			</span>
			<input type="text" class="form-control">
		</div>
		<!-- 在右侧使用按钮 -->
		<div class="input-group">
			<input type="text" class="form-control">
			<span class="input-group-btn">
				<button class="btn btn-default">提交</button>
			</span>
		</div>
		<!-- 作为额外元素的按钮式下拉菜单 -->
		<div class="input-group">
			<div class="input-group-btn">
				<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
					下拉菜单<span class="caret"></span>
				</button>
				<ul class="dropdown-menu">
					<li><a href="#">首页</a></li>
					<li><a href="#">资讯</a></li>
					<li><a href="#">产品</a></li>
					<li><a href="#">网博</a></li>
				</ul>
			</div>
			<input type="text" class="form-control">
		</div>
			<hr>
			
			<!-- 基本的导航组件：标签页 -->
			<ul class="nav nav-tabs">
				<li class="active"><a href="#">首页</a></li>
				<li><a href="#">资讯</a></li>
				<li><a href="#">产品</a></li>
				<li><a href="#">网博</a></li>
			</ul>
			
			<!-- 胶囊式标签页 -->
			<ul class="nav nav-justified">
				<li class="active"><a href="#">首页</a></li>
				<li><a href="#">资讯</a></li>
				<li><a href="#">产品</a></li>
				<li class="disabled"><a href="#">网博</a></li>
			</ul>
			
			<!-- 导航条，包含标题、列表 -->
			<div class="navbar navbar-default navbar-fixed-top">
				<div class="container">
					<div class="navbar-header">
						<a href="#" class="navbar-brand">
							<img src="images/qq.jpg" alt="" style="width:20px;">
						</a>
					</div>
					<ul class="nav navbar-nav">
						<li class="active"><a href="#">南京网博</a></li>
						<li><a href="#">论坛首页</a></li>
						<li><a href="#">技术论坛</a></li>
						<li><a href="#">积分商城</a></li>
						<li><a href="#">投票</a></li>
					</ul>
					<button class="btn btn-default navbar-btn navbar-right">注册</button>
					<button class="btn btn-default navbar-btn navbar-right" style="margin-right:10px;">登陆</button>
					<form class="navbar-form navbar-right">
						<div class="input-group">
							<div class="input-group-btn">
								<button class="btn btn-default" data-toggle="dropdown">
							文章 <span class="caret"></span>							
						</button>
						<ul class="dropdown-menu">
							<li><a>文章</a></li>
							<li><a>帖子</a></li>
							<li><a>用户</a></li>
						</ul>
							</div>
							<input type="text" class="form-control" placeholder="请输入要输入的关键字">
							<span class="input-group-btn">
								<button class="btn btn-default">搜索</button>
							</span>
						</div>
					</form>
					<p class="navbar-text">welcome to<a href="http://www.baidu.com" class="navbar-link">itany</a></p>
				</div>
			</div>
	</body>
</html>
